<template>
  <div class='tikTokCon' >
    <div class="base-content" v-if="currentType === 'tableList'">
      <div class="before-begin">
        <div class="tikTok-logo">
          <img src="../../../../../assets/img/tikTokLogo.png" alt=""/>
          <span>
              <p>
                {{$t('config.channel.TikTokTip01')}}<br/>
                {{$t('config.channel.TikTokTip02')}}
              </p>
          </span>
        </div>
        <p>{{$t('config.channel.TikTokTip03')}}</p>
        <el-button type="primary" class="primary_btn" @click="addBind">{{$t('config.channel.TikTokBtn')}}</el-button>
      </div>
      <search 
              :showAdd="true"
              :isShowInput="false"
              :isReloadIvr="false"
              :showAdvSearch="false"
              @refresh="refresh"
              @add="addBind"
              @turnPage="turnPage"
              :currentPage="currentPage"
              :count="count"
              :pageSize="pageSize"></search>
      <el-table :data="tableData" size="mini">
        <el-table-column prop="name" :label="$t('config.channel.tikTokName')">
        </el-table-column>
        <el-table-column prop="to_peer_name" :label="$t('public.queues')">
        </el-table-column>
        <el-table-column prop="lastUpdateTime" :label="$t('config.channel.lastUpdateTime')">
        </el-table-column>
        <el-table-column :label="$t('config.channel.TikTokTip04')">
          <template scope="scope">
            <span v-if="scope.row.flag === 0" >{{$t('config.channel.TikTokTip08')}}</span>
            <span v-if="scope.row.flag === 1" >{{$t('config.channel.TikTokTip09')}}</span>
            <span v-if="scope.row.flag && scope.row.flag !== 0 && scope.row.flag !== 1" >{{$t('config.channel.TikTokTip10')}}</span>
            <span class="add_binding_span" v-if="scope.row.flag && scope.row.flag !== 0 && scope.row.flag !== 1"  @click="addBind" >{{$t('config.channel.TikTokTip11')}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="endTimeData" :label="$t('config.channel.TikTokTip05')">
        </el-table-column>
        <el-table-column :label="$t('public.operate')">
          <template scope="scope">
            <el-button @click="modify(scope.row)" type="text" size="small" class="update">{{$t('public.edit')}}</el-button>
            <!-- <el-button type="text"
                     size="small">
                     <a :href="scope.row.imidUrl"
                     target="_blank">{{$t('public.test')}}</a></el-button> -->
            <el-button type="text" @click="delrow(scope.row)" size="small" class="del">{{$t('public.delete')}}</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- <tikTokBind v-if="currentType === 'tikTokBind'" @success="addTikTokCallback" @back="refresh"></tikTokBind> -->
    <BreadCrumbConfig v-if="currentType === 'tikTokEdit'" :titleArr="titleArr" @back="refresh"></BreadCrumbConfig>
    <tikTokEdit v-if="currentType === 'tikTokEdit'" :tikTokData="formData" :type="dataTodo" @back="refresh"></tikTokEdit>
    <!-- v-if="currentType === 'tikTokEdit'" :formData="formData" -->
  </div>
</template>
<script>
  import search from '../base/search.vue'
  import tikTokBind from './tikTokBind.vue'
  import tikTokEdit from './tikTokEdit.vue'
  import BreadCrumbConfig from '@/components/ui-modules/breadCrumb/BreadCrumbConfig'
  import { getCacheByKey, getFormatDateTime } from '@/utils/m7Utils.js'
  import bus from '@/store/eventBus'
  export default{
    name: 'tikTokCon',
    data () {
      return {
        currentPage: 1,
        pageSize: 10,
        count: 0,
        currentType: 'tableList',
        dataTodo: 'add',
        tableData: [],
        titleArr: ['抖音企业号管理', this.$t('public.add')],
        formData: {}
      }
    },
    components: {
      search,
      tikTokBind,
      BreadCrumbConfig,
      tikTokEdit
    },
    methods: {
      addBind () {
        this.$store.dispatch('getDouyinConfigs', {}).then((resp) => {
          if (resp.success) {
            var dataNew = resp.douyin_Url
            var winWidth=screen.width;  //获取屏幕宽度
            var winHeight=screen.height;  //获取屏幕高度
            //获取新窗口距离屏幕左侧的位置
            var left=(winWidth-500)/2;  
            //获取新窗口距离屏幕顶部的位置
            var top=(winHeight-500)/2;
            window.open (dataNew, '', 'width=700, height=500, left='+left+',top='+top+', toolbar =no, menubar=no, scrollbars=no, resizable=no, location=no, status=no') 
          } else {
            this.$message.error(this.$t('message.agent_close_auto_claim'))
          }
        })
      },
      addTikTokCallback () {
        this.currentType = 'tikTokEdit'
        // this.formData = data
        this.dataTodo = 'add'
      },
      modify (data) {
        this.currentType = 'tikTokEdit'
        this.formData = data
        this.dataTodo = 'update'
      },
      delrow (data) {
        this.$confirm(this.$t('config.channel.TikTokTip06'), this.$t('public.delete'), {
            confirmButtonText: this.$t('public.delete'),
            cancelButtonText: this.$t('public.cancel'),
            cancelButtonClass: 'primary_btn',
            confirmButtonClass: 'primary_btn',
            type: 'warning'
          }).then(() => {
            this.$store.dispatch('removeDouyinConfig', {_id: data._id}).then((req) => {
              if (req.success) {
                this.$message.success(this.$t('config.channel.deleteSuccess'))
                this.fetchData()
              } else {
                this.$message.error(this.$t('configLazyLoad.channel.tikTokTip005'))
              }
            })
          })
      },
      refresh () {
        this.currentType = 'tableList'
        this.currentPage = 1
        this.fetchData()
      },
      turnPage (val) {
        this.currentPage = val
        this.fetchData()
      },
      fetchData () {
        let data = {
          page: this.currentPage,
          limit: this.pageSize
        }
        this.$store.dispatch('getDouyinConfigs', data).then((resp) => {
          this.count = resp.count
          let p1 = this.$store.dispatch('getCache', {type: 'mailQueues'})
          Promise.all([p1]).then((a) => {
            resp.list && resp.list.forEach((item, index) => {
              let peer = getCacheByKey('mailQueues', 'Exten', item.to_peer)
              if (peer) {
                resp.list[index]['to_peer_name'] = peer.DisplayName
              }
              if (item.updateTime) {
                item.lastUpdateTime = getFormatDateTime(new Date(item.updateTime))
              }
              if ( typeof item.flag === 'number') {
                // if (item.flag === 0) {
                //   item.binding = this.$t('config.channel.TikTokTip08')
                // } else if (item.flag === 1) {
                //   item.binding = this.$t('config.channel.TikTokTip09')
                // } else {
                //   item.binding = this.$t('config.channel.TikTokTip10')
                // }
              } else {
                item.binding = ''
              }
              if (item.endTime) {
                item.endTimeData = getFormatDateTime(new Date(item.endTime))
              } else {
                item.endTimeData = ''
              }
            })
            this.tableData = resp.list
          })
        })
      },
      editNewAccess (data) {
        console.log(data)
        if (data.id && data.code === 'success') {
          this.$store.dispatch('getDouyinConfigById', {_id: data.id}).then((req) => {
            if (req.success) {
              this.modify(req.doc)
            } else {
              this.$message.error(this.$t('config.channel.deleteFailure'))
            }
          })
        } else if (data.code === 'authorized') {
          this.refresh()
        }
      }
    },
    activated () {
      this.fetchData()
    },
    mounted () {
      this.fetchData()
      bus.$on('refreshDyAccessList', (data) => {
        this.editNewAccess(data)
      })
    },
    beforeDestroy () {
      bus.$off('refreshDyAccessList')
    }
  }
</script>
<style lang="stylus" scoped>
  @import "../../../../../assets/common.styl"
  .el-table .cell >.el-button--text.del
    color $c-pink
    cursor pointer
  .base-content
    height: calc(100vh - 170px);
    overflow-y: auto;
  .update
    cursor pointer
  .el-table .cell >.el-button--text.del
    color $c-pink
    cursor pointer
  .before-begin
    text-align center
    margin 25px
    background #f2f6fa
    >p
      margin-bottom 34px
      font-size 14px
      line-height 18px
      font-size 12px
    .el-button
      margin-bottom 28px
    .tikTok-logo
      padding 34px 0 10px 0
      display table
      margin 0 auto
      img 
        width 70px
        height 70px
      span
        display table-cell
        vertical-align middle
        margin-left 10px
        p
          line-height 1.8
          margin-left 14px
          text-align left
  .tikTokCon
    height 100%
    overflow auto
  .add_binding_span
    color $c-nav-to
    cursor pointer
</style>